<template>
  <div class="container_comment" ref="container_body">
    <header class="van-hairline--bottom">
      <div class="header_title">
        <span>工单详情</span>
        <span>{{serviceStatusName}}</span>
      </div>
      <div class="time_display">
        <span>发起时间：{{receptionDate}}</span>
        <!-- <span>{{topText}}</span> -->
      </div>
    </header>

    <div class="user_info">
      <span>{{contactName}}</span>
      <!-- <van-icon size="30" color="#fd5817" name="user-circle-o" /> -->
      <img src="../assets/head.jpg" alt />
    </div>
    <div class="text_line"></div>
    <!-- 时间线 -->
    <div class="process_title">进度</div>
    <time-line v-if="progressList.length" :progressList="progressList"></time-line>

    <van-empty v-else description="暂时还没有工单流程哦" />

    <!-- 工单内容 -->
    <order-info :orderContent="orderContent" />

    <footer v-if="progressList.length">
      <van-button
        v-for="(btn, index) of btnList"
        :key="index"
        class="btn_style"
        :style="{padding: btn.btnName === '去评价' ? '20px 150px' : '20px 60px'}"
        hairline
        type="primary"
        :color="btn.color"
        size="small"
        @click="sureConfirm(btn.btnName)"
      >{{btn.btnName}}</van-button>
    </footer>
    <!-- 驳回弹窗 -->
    <reject-dialog v-if="visiable" :visiable.sync="visiable" @resetFetch="getOrderTimeLineList"></reject-dialog>
  </div>
</template>

<script>
// import { parseTime } from "@/utils";
import { getOrderLine, sureWorkOrder } from "@/api/comment";

import RejectDialog from "./components/reject-dialog";
import TimeLine from "./components/time-line";
import OrderInfo from "./components/order-info";
export default {
  name: "Home",
  components: {
    TimeLine,
    RejectDialog,
    OrderInfo
  },
  filters: {
    filterColor(status) {
      const colorMap = {
        0: "#fd5817",
        1: "#0a7aeb"
      };
      return colorMap[status] || "#0a7aeb";
    }
  },
  data() {
    return {
      time: new Date(),
      progressList: [],
      btnList: [],
      serviceStatusName: "",
      visiable: false,
      contactName: "余江川",
      receptionDate: "",
      isCusEval: null, // 是否评价
      serviceStatus: null, // 流程状态
      orderContent: {}
    };
  },
  computed: {},
  methods: {
    sureConfirm(btnName) {
      console.log("sureConfirm -> btnName", btnName);
      if (this.serviceStatus === 30 && !this.isCusEval) {
        this.$router.push({
          name: "OrderComment",
          query: {
            workorderId: this.$route.query.workorderId
          }
        });
      }
      if (this.serviceStatus === 23) {
        // 驳回或确认
        switch (btnName) {
          case "已解决":
            this.sureOrder();
            break;
          case "未解决":
            this.rejectOrder();
            break;

          default:
            break;
        }
      }
    },
    sureOrder() {
      const beforeClose = (action, done) => {
        if (action === "confirm") {
          sureWorkOrder().then(() => {
            done();
            this.getOrderTimeLineList();
            this.$toast.success("确认成功");
            setTimeout(() => {
              this.$router.push({
                name: "OrderComment",
                query: {
                  workorderId: this.$route.query.workorderId
                }
              });
            }, 500);
          });
        } else {
          done();
        }
      };
      this.$dialog.confirm({
        title: "确认问题已解决？",
        // message: "您是否要确认工单？",
        beforeClose
      });
    },
    rejectOrder() {
      this.visiable = true;
    },
    getOrderTimeLineList() {
      getOrderLine().then(res => {
        // console.log("getOrderTimeLineList -> res", res);
        this.progressList = res.progressList;
        this.contactName = res.contactName;
        this.serviceStatus = res.serviceStatus;
        this.isCusEval = res.isCusEval;
        this.serviceStatusName = res.serviceStatusName;
        this.receptionDate = res.receptionDate;
        this.orderContent = res;
        switch (this.serviceStatus) {
          case 23:
            this.btnList = [
              {
                color: "#fd5817",
                btnName: "未解决"
              },
              {
                color: "#0a7aeb",
                btnName: "已解决"
              }
            ];
            break;
          case 30:
            this.btnList = this.isCusEval
              ? []
              : [
                  {
                    color: "#0a7aeb",
                    btnName: "去评价"
                  }
                ];
            break;

          default:
            this.btnList = [];
            break;
        }
      });
    }
  },
  created() {
    this.getOrderTimeLineList();
  },
  mounted() {
    // 保持底部区域的延展性
    if (this.progressList.length) {
      this.$nextTick(() => {
        this.$refs.container_body.style.marginBottom = '50px'
      })
    }
  }
};
</script>
<style lang="less">
// @primary-color: #b3fa2e;
.padding {
  margin: 5px 0;
  padding: 5px 10px;
}

.container_comment {
  margin-top: 10px;
  header {
    // .padding();
    background: #fff;
    padding: 10px;
    border-bottom: 1px sold;
  }
  .header_title {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    > span:nth-child(1) {
      font-size: 15px;
      font-weight: 700;
    }
    > span:nth-child(2) {
      color: @primary-color;
    }
  }
  .time_display {
    font-size: 13px;
    color: #999;
  }

  .user_info {
    // .padding();
    padding: 0px 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    span {
      font-size: 15px;
    }
    img {
      width: 35px;
      padding: 5px;
      border-radius: 50%;
    }
  }
  .process_title {
    background: #fff;
    padding: 10px;
    font-size: 14px;
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    // background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn_style {
      margin-right: 10px;
      padding: 20px 60px;
    }
  }
}
</style>
